<template>
  <div style="overfiow:hidden;">
    <div class="hotel-models">
      <div class="hotel-top" @click="onHotelDetails">
        <img src="../../assets/jiudiantoux.png" class="hotel-topImg" alt>
        <div>
          <h2 class="hotel-h2">北京华尔道夫酒店</h2>
          <p class="hotel-p">北京市东城区金鱼胡同5-15号</p>
        </div>
      </div>
          <div class="hetel-solids"></div>
      <div class="hotel-bottom">
        <div>
          <h1 class="hotel-bottomH1">894.95</h1>
          <p class="hotel-bottomP">日销售额</p>
        </div>
        <div style="text-align:right">
          <h1 class="hotel-bottomH1">10584.56</h1>
          <p class="hotel-bottomP">月销售额</p>
        </div>
      </div>
    </div>
    <div class="hotel-models">
      <div class="hotel-top" @click="onHotelDetails">
        <img src="../../assets/jiudiantoux.png" class="hotel-topImg" alt>
        <div>
          <h2 class="hotel-h2">北京华尔道夫酒店</h2>
          <p class="hotel-p">北京市东城区金鱼胡同5-15号</p>
        </div>
      </div>
      <div class="hetel-solids"></div>
      <div class="hotel-bottom">
        <div>
          <h1 class="hotel-bottomH1">894.95</h1>
          <p class="hotel-bottomP">日销售额</p>
        </div>
        <div style="text-align:right">
          <h1 class="hotel-bottomH1">10584.56</h1>
          <p class="hotel-bottomP">月销售额</p>
        </div>
      </div>
    </div>
    <div class="hotel-models">
      <div class="hotel-top" @click="onHotelDetails">
        <img src="../../assets/jiudiantoux.png" class="hotel-topImg" alt>
        <div>
          <h2 class="hotel-h2">宇洲正大正熙国际酒店(成都春熙太古里店)</h2>
          <p class="hotel-p">北京市东城区金鱼胡同5-15号</p>
        </div>
      </div>
      <div class="hetel-solids"></div>
      <div class="hotel-bottom">
        <div>
          <h1 class="hotel-bottomH1">894.95</h1>
          <p class="hotel-bottomP">日销售额</p>
        </div>
        <div style="text-align:right">
          <h1 class="hotel-bottomH1">10584.56</h1>
          <p class="hotel-bottomP">月销售额</p>
        </div>
      </div>
    </div>
    <div @click="AddHotel" class="hotel-footer">
      <img src="../../assets/jia.png" class="hotel-footerImg" alt>
      <span class="hotel-footerSpan">添加酒店</span>
    </div>
  </div>
</template>
<script>
// 酒店管理
export default {
  name: 'Hotelmanagement',
  methods: {
    AddHotel () {
      this.$router.push({ name: 'AddHotel' })
    },
    onHotelDetails () {
      this.$router.push({ name: 'HotelDetails' })
    }
  },
  created: () => {
    document.title = '商家管理'
  }
}
</script>
<style lang='scss' scoped>
.hotel-models {
  padding-top: 2.3vh;
  width: 100%;
  background: rgba(255, 255, 255, 1);
}
.hotel-top {
  height: 11.8vh;
  padding-top: 2.3vh;
  display: flex;
  background: rgba(255, 255, 255, 1);
}
.hetel-solids {
  float: right;
  width: 96vw;
  height: 1px;
  background: rgba(238, 238, 238, 1);
}
.hotel-topImg {
  margin-left: 3.46vw;
  width: 13.01vw;
  height: 7.34vh;
  margin-right: 1.33vw;
}
.hotel-h2 {
  width: 78vw;
  font-size: 4.5vw;
  font-family: SourceHanSansCN-Bold;
  font-weight: bold;
  color: rgba(22, 22, 22, 1);
  margin-bottom: 1.48vh;
  margin-top: 0.79vh;
}
.hotel-p {
  font-size: 3.2vw;
  font-family: SourceHanSansCN-Regular;
  font-weight: 400;
  color: rgba(134, 134, 134, 1);
}
.hotel-bottom {
  box-sizing: border-box;
  width: 100%;
  height: 12.43vh;
  display: flex;
  padding: 3.4vw;
  background: rgba(255, 255, 255, 1);
  justify-content: space-between;
}
.hotel-bottomH1 {
  font-size: 5.6vw;
  font-family: SourceHanSansCN-Bold;
  font-weight: bold;
  color: rgba(22, 22, 22, 1);
}
.hotel-bottomP {
  margin-top: 1.48vh;
  font-size: 3.2vw;
  font-family: SourceHanSansCN-Regular;
  font-weight: 400;
  color: rgba(168, 168, 168, 1);
}
.hotel-footer {
  display: flex;
  bottom: 0;
  background: rgba(255, 255, 255, 1);
  width: 100%;
  height: 14.6vw;
  border-top: 1px solid rgba(238, 238, 238, 1);
}
.hotel-footerImg {
  width: 4.5vw;
  height: 2.54vh;
  margin-left: 37.35vw;
  margin-top: 4.9vw;
  margin-right: 2.6vw;
}
.hotel-footerSpan {
margin-top: 4.9vw;
}
</style>
